import React, { Fragment, PureComponent } from 'react'
import { connect } from 'dva'
import { OssUpload } from 'scd'
import { Row, Col, Form, Input, Spin, List, Card, Checkbox } from 'antd'

const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;

@connect(({ loading, app, dispatch, orgInsider }) => ({
  app: app,
  orgInsider: orgInsider,
  roleloading: loading.effects['orgInsider/getRolesByOrgId']
}))
@Form.create()

class PromiseModalForm extends PureComponent {

  checkboxGroup = (list) => {
    const { form } = this.props
    let initValue = []
    list.map(item => {
      if (item.isCheck === 1) {
        initValue.push(item.id)
      }
    })
    return (<FormItem>
      {form.getFieldDecorator("roleList", {
        initialValue: initValue,
      })(
        <Checkbox.Group>
          <Row>
            {list.map(item => {
              return (<Col span={24} key={item.id} style={{ marginBottom: '20px' }}>
                <Checkbox value={item.id}>{item.name}</Checkbox>
              </Col>)
            })}
          </Row>
        </Checkbox.Group>
      )}
    </FormItem>)
  }


  render() {
    const { form, modalType, dataSource, roleloading, orgInsider: { rolePromiseList }, app: { singleOriginal } } = this.props
    // console.log("rolePromiseList->", rolePromiseList)
    return (
      <Fragment>
        <Spin
          size="small"
          spinning={!!roleloading}
          tip="加载中...">
          <Row type="flex" justify="space-between">
            <Col span={10}>
              <Card size="small" title="所属组织：" type="inner"
                bordered={false}
                headStyle={{ border: '0', padding: '0', background: 'none' }}
                bodyStyle={{ padding: '0' }}
              >
                <p>{singleOriginal.name}</p>
                <p>{dataSource.pathName || "暂无所属部门"}</p>
              </Card>
            </Col>
            <Col span={10}>
              <Card size="small" title="角色设置：" type="inner"
                bordered={false}
                headStyle={{ border: '0', padding: '0', background: 'none' }}
                bodyStyle={{ padding: '0' }}
              >

                {rolePromiseList.length > 0 ? <FormItem>
                  {form.getFieldDecorator("roleList", {
                    // initialValue: ["A", "B"],
                  })(
                    <Checkbox.Group>
                      <Row>
                        {this.checkboxGroup(rolePromiseList)}
                      </Row>
                    </Checkbox.Group>
                  )}
                </FormItem> : "暂无权限设置"}
                {/* {rolePromiseList.length > 0 && this.checkboxGroup(rolePromiseList)} */}
              </Card>
            </Col>
          </Row>
        </Spin>
      </Fragment>
    );
  }
}

export default PromiseModalForm;









